<template>
	<view class="container">
		<view class="signMessage">
			<view class="sign-item sign_img" id='enter-store' @click="type = 'account2'">
				上传合同照片
			</view>
			<view class="sign-item" @click="type = 'account1'">
				录入门店信息
			</view>
		</view>

		<uni-forms ref="form" :modelValue="formData">
			<view class="sign-list" v-if="type === 'account1'">
				<uni-forms-item label="门店名" name="mdname">
					<input placeholder-class="placeholder" class="form-input" type="text" placeholder="请输入门店名"
						v-model="formData.mdname">
				</uni-forms-item>
				<uni-forms-item label="联系人" name="linkname">
					<input placeholder-class="placeholder" class="form-input" type="text" placeholder="请输入联系人姓名"
						v-model="formData.linkname">
				</uni-forms-item>
				<uni-forms-item label="联系电话" name="linkphone">
					<input placeholder-class="placeholder" class="form-input" type="text" placeholder="请输入联系电话"
						v-model="formData.linkphone">
				</uni-forms-item>
				<uni-forms-item label="详细地址" name="address">
					<input placeholder-class="placeholder" class="form-input" type="text" placeholder="请输入详细地址"
						v-model="formData.address">
				</uni-forms-item>
				<uni-forms-item label="邮箱" name="email">
					<input placeholder-class="placeholder" class="form-input" type="text" placeholder="请输入邮箱"
						v-model="formData.email">
				</uni-forms-item>
				<uni-forms-item label="微信" name="wechat">
					<input placeholder-class="placeholder" class="form-input" type="text" placeholder="请输入微信"
						v-model="formData.wechat">
				</uni-forms-item>
				<uni-forms-item label="开户行" name="openingbank">
					<input placeholder-class="placeholder" class="form-input" type="text" placeholder="请输入开户行"
						v-model="formData.openingbank">
				</uni-forms-item>
				<uni-forms-item label="银行账户" name="bankaccount">
					<input placeholder-class="placeholder" class="form-input" type="text" placeholder="请输入门店名"
						v-model="formData.bankaccount">
				</uni-forms-item>
				<uni-forms-item label="收货人" name="consignee">
					<input placeholder-class="placeholder" class="form-input" type="text" placeholder="请输入银行账户"
						v-model="formData.consignee">
				</uni-forms-item>
				<uni-forms-item label="收货电话" name="tollcall">
					<input placeholder-class="placeholder" class="form-input" type="text" placeholder="请输入收货电话"
						v-model="formData.tollcall">
				</uni-forms-item>
				<uni-forms-item label="收货地址" name="shaddress">
					<input placeholder-class="placeholder" class="form-input" type="text" placeholder="请输入收货地址"
						v-model="formData.shaddress">
				</uni-forms-item>

				<view class="remind">
					<view class="remind_a">
						备注
					</view>
					<textarea class="remind_input" bindblur="bindTextAreaBlur" placeholder="请输入备注信息!"
						v-model="formData.remind" placeholder-class="textarea-placeholder" />
					<button class="submit" @click="enterStoreInfo">确认提交并继续</button>
				</view>
			</view>
			<view class="list" v-else>
				<view class="list_image">
					<image class="urlimage" :src="urlImage" mode="" v-if="urlImage"></image>
					<view class="load-more" v-if="!urlImage">
						<image src="/static/image/business/10.png" mode=""></image>
						<view class="loadtext">
							上传合同照片
						</view>
					</view>
				</view>
				<view class="loadbtn">
					<button @click="shoot">拍照</button>
					<button @click="photo">相册</button>
				</view>
				<button class="end" @click="signImage">完成签约</button>
			</view>
		</uni-forms>
	</view>
</template>

<script>
	import $http from "@/ajax/http.js"
	import {
		loadingImage
	} from "@/common/mixins/uploading/loadImage.js"

	export default {
		mixins: [loadingImage],
		data() {
			return {
				type: 'account2',
				qhcolor: '#00828C',
				token: wx.getStorageSync('token'),
				formData: {
					mdname: '',
					linkname: '',
					linkphone: '',
					address: '',
					email: '',
					wechat: '',
					openingbank: '',
					bankaccount: '',
					consignee: '',
					shaddress: '',
					tollcall: '', // 添加缺失的字段
					remind: '' // 添加缺失的字段
				},
			}
		},
		methods: {
			// 上传门店信息
			enterStoreInfo() {
				console.log(this.failId, "文件ID");
				if (this.failId === '') {
					wx.showModal({
						title: '提示',
						content: '您还未上传合同照片，请先上传合同照片！',
						showCancel: false
					})
				} else {
					$http.request({
						url: "/bus/index/enterStoreInfo",
						data: {
							linkUserName: this.formData.linkname,
							linkUserPhone: this.formData.linkphone,
							receiverAddress: this.formData.shaddress,
							receiverName: this.formData.consignee,
							receiverPhone: this.formData.tollcall,
							remark: this.formData.remind,
							signStoreAddress: this.formData.address,
							signStoreEmail: this.formData.email,
							signStoreName: this.formData.mdname,
							bankName: this.formData.openingbank,
							bankAccount: this.formData.bankaccount,
							signStoreWechat: this.formData.wechat,
							sysFileId: this.failId
						},
						method: 'POST'
					}).then((res) => {
						console.log(res, "上传门店数据");
					})
				}
			}
		}
	}
</script>



<style scoped lang="scss">
	@import url('../../../common/sass/all/all.scss');

	.signMessage {
		width: 680rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		#enter-store {
			color: #00828C;
		}

		.sign-item {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 350rpx;
			height: 72rpx;
			line-height: 72rpx;
			background-image: url('/static/image/business/9.png');
			background-repeat: no-repeat;
			background-size: contain;
			font-size: 28rpx;
			font-weight: 400;
			color: #FFFFFF;
		}

		.sign_img {
			font-size: 28rpx;
			font-weight: 400;
			background-image: url('/static/image/business/8.png');
		}
	}

	/deep/ .uni-forms {
		.sign-list {
			width: 680rpx;
			margin-top: 24rpx;

			.uni-forms-item {
				background-color: #FFFFFF;
				display: flex;
				align-items: center;
				margin-bottom: 15rpx;
				border-top-left-radius: 10rpx;
				border-bottom-left-radius: 10rpx;

				.placeholder {
					margin-left: 16rpx;
				}

				.uni-forms-item__label {
					width: 210rpx !important;
					background: linear-gradient(to left, RGBA(18, 183, 163, 1), RGBA(18, 183, 163, 1));
					border-top-left-radius: 10rpx;
					border-bottom-left-radius: 10rpx;
					text-align: justify;
					padding: 0 !important;

					text {
						margin: 0 auto;
						font-size: 28rpx;
						font-weight: 500;
						color: #FFFFFF;
						height: 73rpx;
						display: flex;
						justify-content: space-around;
						align-items: center;
						text-align: justify;
						width: 140rpx;
					}
				}
			}

			.remind {
				.remind_a {
					color: #FFFFFF;
				}

				.remind_input {
					width: 679rpx;
					height: 162rpx;
					background-color: #FFFFFF;
					border-radius: 15rpx;
					margin-top: 15rpx;
				}

				.textarea-placeholder {
					color: #000;
				}

				.submit {
					width: 678rpx;
					height: 91rpx;
					line-height: 91rpx;
					border-radius: 15rpx;
					margin-top: 32rpx;
					background: linear-gradient(to left, RGBA(0, 130, 140, 1), RGBA(19, 183, 163, 1));
					font-size: 32rpx;
					font-weight: 400;
					color: #FFFFFF;
					box-shadow: 2rpx 4rpx 8rpx rgba(1, 66, 67, 1);
				}
			}

		}

		.list {
			.list_image {
				width: 679rpx;
				height: 282rpx;
				background-color: #FFFFFF;
				border-radius: 20rpx;
				margin-top: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.urlimage {
					width: 679rpx;
					height: 282rpx;
					border-radius: 20rpx;
				}

				.load-more {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
				}

				image {
					width: 78rpx;
					height: 69rpx;
				}
			}

			.loadbtn {
				display: flex;
				flex-direction: row;
				margin-top: 27rpx;

				button {
					width: 326rpx;
					height: 91rpx;
					line-height: 91rpx;
					border-radius: 15rpx;
					font-size: 32rpx;
					font-weight: 400;
					color: #3E3A39;
					background: linear-gradient(to right bottom, rgba(238, 255, 255, 1), rgba(174, 255, 255, 1));
					box-shadow: 2rpx 6rpx 6rpx #0d6369;
				}
			}

			.end {
				width: 678rpx;
				height: 91rpx;
				line-height: 91rpx;
				margin-top: 46rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
				background: linear-gradient(to right, rgba(19, 183, 163, 1), rgba(0, 130, 140, 1));
				box-shadow: 2rpx 6rpx 6rpx #096066;
			}
		}
	}
</style>